<template>
	<div class="app-container">
		<el-form class="filter-container" label-position="left" label-width="68px">
			<el-row :gutter="10">
				<el-col :span="3">
					<el-form-item label="模块" style="margin-bottom: 0!important;">
						<el-select clearable @keyup.enter.native="getList" class="filter-item" placeholder="请输入模块" v-model="listQuery.module">
							<el-option v-for="(option, key) in selectOptions.module" :value="key" :key="key" :label="option"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="操作类型" style="margin-bottom: 0!important;">
						<el-select clearable @keyup.enter.native="getList" class="filter-item" placeholder="请输入操作类型" v-model="listQuery.type">
							<el-option v-for="(option, key) in selectOptions.operation" :value="key" :key="key" :label="option"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4">
					<el-form-item label="操作内容" style="margin-bottom: 0!important;">
						<el-input clearable @keyup.enter.native="getList" class="filter-item" placeholder="请输入搜索内容" v-model="listQuery.param">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="3">
					<el-form-item label="用户" style="margin-bottom: 0!important;">
						<el-input clearable @keyup.enter.native="getList" class="filter-item" placeholder="请输入用户" v-model="listQuery.userId">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="创建时间" style="margin-bottom: 0!important;">
						<el-date-picker type="datetimerange" :default-time="['00:00:00', '23:59:59']" @keyup.enter.native="getList" style="width: 450px;" class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="time" :picker-options="pickerOptions" clearable>
						</el-date-picker>
					</el-form-item>
				</el-col>
					<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getList">
						{{$t('table.search')}}
					</el-button>
			</el-row>
		</el-form>

		<el-table stripe :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row style="width: 100%">
			<!--<el-table-column align="center" type="selection" width="55">-->
			<!--</el-table-column>-->
			<el-table-column align="center" label="模块">
				<template slot-scope="scope">
					<span>{{selectOptions.module[scope.row.module] || scope.row.module}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作类型">
				<template slot-scope="scope">
					<span>{{selectOptions.operation[scope.row.type] || scope.row.type}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作内容" width="600px">
				<template slot-scope="scope">
					<el-popover popper-class="record-popover" effect="dark" placement="right" width="350" trigger="click" visible-arrow :content="scope.row.param">
						<el-button type="text" class="nowrap" slot="reference">
							<span>{{scope.row.param}}</span>
						</el-button>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作用户">
				<template slot-scope="scope">
					<span>{{scope.row.userId}}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="创建时间">
				<template slot-scope="scope">
					<span>{{scope.row.createTime}}</span>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination-container">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import { operationRecordList, operationRecordEnum } from '../../api/systemManagement'
	import waves from '@/directive/waves' // 水波纹指令

	export default {
		name: 'complexTable',
		directives: {
			waves
		},
		data() {
			return {
				tableKey: 0,
				list: null,
				total: null,
				listLoading: true,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					param: '',
					type: '',
					module: '',
					userId: '',
					startTime: '',
					endTime: ''
				},
				time: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 24 * 3600 * 1000, new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000],
				selectOptions: {
					module: {},
					operation: {}
				},
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三天',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24 * 3
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一周',
						onClick(picker) {
							const end = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1).getTime() - 1000
							const start = end + 1000 - 3600 * 1000 * 24 * 7
							picker.$emit('pick', [start, end])
						}
					}]
				}
			}
		},
		beforeCreate() {
			operationRecordEnum().then(response => {
				this.selectOptions.module = response.Data[0].module
				this.selectOptions.operation = response.Data[0].operation
			})
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				if(this.time) {
					this.listQuery.startTime = this.time[0]
					this.listQuery.endTime = this.time[1]
				} else {
					this.listQuery.startTime = ''
					this.listQuery.endTime = ''
				}
				operationRecordList(this.listQuery).then(response => {
					// console.log(response)
					this.listLoading = false
					this.list = response.Data
					this.total = parseInt(response.total)
				})
			},
			handleSizeChange(val) {
				this.listQuery.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.getList()
			},
			handleModifyStatus(row, status) {
				this.$message({
					message: '操作成功',
					type: 'success'
				})
				row.status = status
			}
		}
	}
</script>

<style>
	.nowrap {
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.el-tooltip__popper {
		max-width: 800px;
		margin: auto;
	}
</style>